<template>
  <div class="tab-center clear">
    <ul class="contain clear">
      <li v-for="(list,index) in tabList" :key="index">
        <img src="./gold.png" />
        <div class="stype">{{list.detail}}</div>
        <div class="discount">
          <p>优惠价：
            <span>{{list.price}}</span>元</p>
        </div>
        <div class="origin">
          <p>
            原价：
            <span>{{list.money}}</span>元</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "tabCenter",
  data() {
    return {
      tabList: [
        { price: "135299", detail: "京东卡", money: "1000" },
        { price: "2955259", detail: "蚂蚁宝卡", money: "2000" },
        { price: "399", detail: "购物卡", money: "3000" },
        { price: "499", detail: "消费卡", money: "4000" },
        { price: "59523559", detail: "代金卡", money: "5056400" },
        { price: "399", detail: "购物卡", money: "3000" },
        { price: "45235599", detail: "消费卡", money: "4000" },
        { price: "599", detail: "代金卡", money: "5000" },
          { price: "599", detail: "代金卡", money: "5000" }
      ]
    };
  },

  created() {},
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "./tabCenter.scss";
</style>
